<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-validate="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.common.js"></script>
    <script src="js/common.js"></script>
    <link rel="stylesheet" href="css/index.css" type="text/css">
</head>
<body>
<div id="app">
   <p>出行日期：
        <input class="oText" type="date" placeholder="日期" v-model="departureDate">
    </p>
    <p>始发地：
        <input class="oText" type="text" placeholder="始发地" v-model="departureCityName">
    </p>
    <p>目的地：
        <input class="oText" type="text" placeholder="目的地" v-model="arrivalCityName">
    </p>
    <input id="button2" type="button" v-on:click="getTicketData" value="getData">
    <table id="table-6" v-for="site in sites"> <!-- Replace "table-7" with any of the design numbers -->
        <thead>
            <th>车次：{{site.trainName}}</th>
            <th>始发地：{{site.startStationName}}</th>
            <th>目的地：{{site.endStationName}}</th>
            <th>时长：{{site.takeTime}}</th>
            <th>发车时间：{{site.startTime}}</th>
        <thead>
        <thead>
            <th>座位</th>
            <th>票价</th>
            <th>余票</th>
        </thead>
        <tbody v-for="seat in site.seatBookingItems">
        <tr>
            <td>{{seat.seatName}}</td>
            <td>{{seat.price}}</td>
            <td>{{seat.inventory}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script>
    var cm = new Vue({
        el: "#app",
        //定义页面所需v-model等参数
        data: {
            departureCityName: '',
            arrivalCityName: '',
            departureDate : '',
            sites: []//[{"endStationName":"大英东","endTime":"08:22","seatBookingItems":[{"price":"36.0","seatName":"二等座","inventory":99},{"price":"44.0","seatName":"一等座","inventory":3},{"price":"36.0","seatName":"二等座","inventory":8},{"price":"44.0","seatName":"一等座","inventory":1},{"price":"36.0","seatName":"二等座","inventory":99},{"price":"44.0","seatName":"一等座","inventory":4},{"price":"19.5","seatName":"硬　座","inventory":99},{"price":"73.5","seatName":"硬　卧","inventory":99},{"price":"113","seatName":"软　卧","inventory":13},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":99},{"price":"36.0","seatName":"无　座","inventory":99},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":0},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":0}],"startStationName":"成都东","startTime":"07:36","takeTime":"0小时46分"},{"endStationName":"大英东","endTime":"09:17","seatBookingItems":[{"price":"36.0","seatName":"二等座","inventory":99},{"price":"44.0","seatName":"一等座","inventory":3},{"price":"36.0","seatName":"二等座","inventory":8},{"price":"44.0","seatName":"一等座","inventory":1},{"price":"36.0","seatName":"二等座","inventory":99},{"price":"44.0","seatName":"一等座","inventory":4},{"price":"19.5","seatName":"硬　座","inventory":99},{"price":"73.5","seatName":"硬　卧","inventory":99},{"price":"113","seatName":"软　卧","inventory":13},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":99},{"price":"36.0","seatName":"无　座","inventory":99},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":0},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":0}],"startStationName":"成都东","startTime":"08:31","takeTime":"0小时46分"},{"endStationName":"大英东","endTime":"09:27","seatBookingItems":[{"price":"36.0","seatName":"二等座","inventory":99},{"price":"44.0","seatName":"一等座","inventory":3},{"price":"36.0","seatName":"二等座","inventory":8},{"price":"44.0","seatName":"一等座","inventory":1},{"price":"36.0","seatName":"二等座","inventory":99},{"price":"44.0","seatName":"一等座","inventory":4},{"price":"19.5","seatName":"硬　座","inventory":99},{"price":"73.5","seatName":"硬　卧","inventory":99},{"price":"113","seatName":"软　卧","inventory":13},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":99},{"price":"36.0","seatName":"无　座","inventory":99},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":0},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":0}],"startStationName":"成都东","startTime":"08:41","takeTime":"0小时46分"},{"endStationName":"大英东","endTime":"13:01","seatBookingItems":[{"price":"36.0","seatName":"二等座","inventory":99},{"price":"44.0","seatName":"一等座","inventory":3},{"price":"36.0","seatName":"二等座","inventory":8},{"price":"44.0","seatName":"一等座","inventory":1},{"price":"36.0","seatName":"二等座","inventory":99},{"price":"44.0","seatName":"一等座","inventory":4},{"price":"19.5","seatName":"硬　座","inventory":99},{"price":"73.5","seatName":"硬　卧","inventory":99},{"price":"113","seatName":"软　卧","inventory":13},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":99},{"price":"36.0","seatName":"无　座","inventory":99},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":0},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":0}],"startStationName":"成都","startTime":"11:15","takeTime":"1小时46分"},{"endStationName":"大英东","endTime":"16:48","seatBookingItems":[{"price":"36.0","seatName":"二等座","inventory":99},{"price":"44.0","seatName":"一等座","inventory":3},{"price":"36.0","seatName":"二等座","inventory":8},{"price":"44.0","seatName":"一等座","inventory":1},{"price":"36.0","seatName":"二等座","inventory":99},{"price":"44.0","seatName":"一等座","inventory":4},{"price":"19.5","seatName":"硬　座","inventory":99},{"price":"73.5","seatName":"硬　卧","inventory":99},{"price":"113","seatName":"软　卧","inventory":13},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":99},{"price":"36.0","seatName":"无　座","inventory":99},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":0},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":0}],"startStationName":"成都东","startTime":"16:02","takeTime":"0小时46分"},{"endStationName":"大英东","endTime":"19:30","seatBookingItems":[{"price":"36.0","seatName":"二等座","inventory":99},{"price":"44.0","seatName":"一等座","inventory":3},{"price":"36.0","seatName":"二等座","inventory":8},{"price":"44.0","seatName":"一等座","inventory":1},{"price":"36.0","seatName":"二等座","inventory":99},{"price":"44.0","seatName":"一等座","inventory":4},{"price":"19.5","seatName":"硬　座","inventory":99},{"price":"73.5","seatName":"硬　卧","inventory":99},{"price":"113","seatName":"软　卧","inventory":13},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":99},{"price":"36.0","seatName":"无　座","inventory":99},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":0},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":0}],"startStationName":"成都东","startTime":"18:44","takeTime":"0小时46分"},{"endStationName":"大英东","endTime":"19:40","seatBookingItems":[{"price":"36.0","seatName":"二等座","inventory":99},{"price":"44.0","seatName":"一等座","inventory":3},{"price":"36.0","seatName":"二等座","inventory":8},{"price":"44.0","seatName":"一等座","inventory":1},{"price":"36.0","seatName":"二等座","inventory":99},{"price":"44.0","seatName":"一等座","inventory":4},{"price":"19.5","seatName":"硬　座","inventory":99},{"price":"73.5","seatName":"硬　卧","inventory":99},{"price":"113","seatName":"软　卧","inventory":13},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":99},{"price":"36.0","seatName":"无　座","inventory":99},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":0},{"price":"36.0","seatName":"二等座","inventory":0},{"price":"44.0","seatName":"一等座","inventory":0}],"startStationName":"成都东","startTime":"18:52","takeTime":"0小时48分"}]
        },
        //相当于网页加载完成后执行的方法
        mounted: function() {
            this.$nextTick(function () {
                var data = {departureCityName: '成都', arrivalCityName: '西昌', departureDate : '2018-1-26'};
                Vue.http.options.emulateJSON = true;
                this.$http.post(comon.url + 'trains/findByTickets', data).then(function(res) {
                    this.sites = res.data.data;
                    //console.log(JSON.stringify(this.sites));
                });
            });
        },
        //定义js函数
        methods: {
            getTicketData: function () {
                if (!cm.departureDate) {
                    alert("请输入出行时间！");
                    return ;
                }
                if (!cm.departureCityName) {
                    alert("请输入始发地！");
                    return ;
                }
                if (!cm.arrivalCityName) {
                    alert("请输入目的地！");
                    return ;
                }
                var data = {departureCityName: cm.departureCityName, arrivalCityName: cm.arrivalCityName, departureDate : cm.departureDate};
                Vue.http.options.emulateJSON = true;
                this.$http.post(comon.url + 'trains/findByTickets', data).then(function(res) {
                    this.sites = res.data.data;
                    //console.log(JSON.stringify(this.sites));
                });
            }
        },
    });
</script>
</html>